import React, { Component } from 'react';
import { Swiper } from 'react-vant';
import { Arrow } from '@react-vant/icons';
import swiperImg from '@/assets/images/swiper-img.png'
import likeImg from '@/assets/images/like.png'
import shareImg from '@/assets/images/share.png'
import hotImg from '@/assets/images/hot.png'
import jiaoshuiImg from '@/assets/images/jiaoshui.png'
import locationImg from '@/assets/images/location.png'
import homeImg from '@/assets/images/home.png'
import phoneImg from '@/assets/images/phone.png'
import yuanImg from '@/assets/images/yuan.png'
import icon1 from '@/assets/images/icon1.png'
import icon2 from '@/assets/images/icon2.png'
import icon3 from '@/assets/images/icon3.png'
import icon4 from '@/assets/images/icon4.png'
import icon5 from '@/assets/images/icon5.png'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
import icon9 from '@/assets/images/icon9.png'
import icon10 from '@/assets/images/icon10.png'
import icon11 from '@/assets/images/icon11.png'
import icon12 from '@/assets/images/icon12.png'
import icon13 from '@/assets/images/icon13.png'
import icon14 from '@/assets/images/icon14.png'
import icon15 from '@/assets/images/icon15.png'
import icon16 from '@/assets/images/icon16.png'
import icon17 from '@/assets/images/icon17.png'
import icon18 from '@/assets/images/icon18.png'
import icon19 from '@/assets/images/icon19.png'
import icon20 from '@/assets/images/icon20.png'
import icon21 from '@/assets/images/icon21.png'
import icon22 from '@/assets/images/icon22.png'
import icon23 from '@/assets/images/icon23.png'
import icon24 from '@/assets/images/icon24.png'
import icon25 from '@/assets/images/icon25.png'
import './homePage.scss';
import { useState } from 'react';

export default function App() {
	const [swiperList,set_swiperList] = useState([
		{
			img: swiperImg
		},
		{
			img: swiperImg
		},
		{
			img: swiperImg
		}
	]);
	const [swiperType,set_swiperType] = useState(1);
	const [activeDataList,set_activeDataList] = useState( [
		{
			icon: icon6,
			title: '空气温度',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon7,
			title: '空气温度',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
		{
			icon: icon8,
			title: '风向',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon9,
			title: '大气压强',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
		{
			icon: icon10,
			title: 'PM2.5',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon11,
			title: 'PM10',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
		{
			icon: icon12,
			title: '负氧离子',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon13,
			title: '噪声',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
		{
			icon: icon14,
			title: '第一层土壤湿度',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon15,
			title: '第一层土壤温度',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
		{
			icon: icon14,
			title: '第二层土壤湿度',
			time: '11-10 20:00:00',
			data: '92.8',
			unit: '%RH'
		},
		{
			icon: icon15,
			title: '第二层土壤温度',
			time: '11-10 20:00:00',
			data: '15',
			unit: '℃'
		},
	]);
	const [seedList,set_seedList] = useState([
		{
			img: swiperImg,
			title: '大蒜',
			desc: '预估产量:10kg/㎡',
			hot: 100
		},
		{
			img: swiperImg,
			title: '白菜',
			desc: '预估产量:10kg/㎡',
			hot: 93
		},
		{
			img: swiperImg,
			title: '土豆',
			desc: '预估产量:10kg/㎡',
			hot: 87
		}
	]);
	const [infoTabList,set_infoTabList] = useState([
		{
			name: '物联网杀虫设备',
			activeTab: 0,
			tabList: [
				{
					name: '设备1'
				},
				{
					name: '设备2'
				},
				{
					name: '设备3'
				},
				{
					name: '设备4'
				}
			]
		},
		{
			name: '浇水控制器',
			activeTab: 0,
			tabList: [
				{
					name: '浇水控制器'
				},
				{
					name: '投食新场地'
				}
			]
		},
		{
			name: '土壤肥沃检测数据',
			activeTab: 0,
			tabList: [
				{
					name: 'xxxxxx'
				},
				{
					name: 'xxxxxx'
				},
				{
					name: 'xxxxxx'
				},
				{
					name: 'xxxxxx'
				}
			]
		}
	]);
	const [activeInfoTab,set_activeInfoTab] = useState(0);
	const [deviceData,set_deviceData] = useState([
		{
			icon: icon1,
			title: '灭蚊',
			time: '11-10 20:00:00',
			data: '6588',
			unit: '次'
		},
		{
			icon: icon2,
			title: '充电状态',
			time: '11-10 20:00:00',
			data: '充电',
			unit: ''
		},
		{
			icon: icon3,
			title: '控制器告警信息',
			time: '11-10 20:00:00',
			data: '无告警',
			unit: ''
		},
		{
			icon: icon4,
			title: 'LED状态',
			time: '11-10 20:00:00',
			data: '100',
			unit: '%'
		},
		{
			icon: icon5,
			title: 'LED输出功率',
			time: '11-10 20:00:00',
			data: '2',
			unit: 'w'
		},
	]);
	const [soilFertilityTestingData,set_soilFertilityTestingData] = useState( [
		{
			icon: icon16,
			title: '土壤湿度',
			time: '11-10 20:00:00',
			data: '46.6',
			unit: '%RH'
		},
		{
			icon: icon17,
			title: '土壤温度',
			time: '11-10 20:00:00',
			data: '17.3',
			unit: '℃'
		},
		{
			icon: icon18,
			title: '土壤电导率',
			time: '11-10 20:00:00',
			data: '91',
			unit: 'US/CM'
		},
		{
			icon: icon19,
			title: '太阳辐射偏差率',
			time: '11-10 20:00:00',
			data: '100',
			unit: 'W/M2'
		},
		{
			icon: icon20,
			title: '土壤含氮量',
			time: '11-10 20:00:00',
			data: '21',
			unit: 'mg/kg'
		},
		{
			icon: icon20,
			title: '土壤含钾量',
			time: '11-10 20:00:00',
			data: '31',
			unit: 'mg/kg'
		},
		{
			icon: icon20,
			title: '土壤含磷量',
			time: '11-10 20:00:00',
			data: '24',
			unit: 'mg/kg'
		},
		{
			icon: icon21,
			title: 'PM2.5',
			time: '11-10 20:00:00',
			data: '28',
			unit: ''
		},
		{
			icon: icon22,
			title: 'PM10',
			time: '11-10 20:00:00',
			data: '30',
			unit: ''
		},
		{
			icon: icon23,
			title: '二氧化碳含量',
			time: '11-10 20:00:00',
			data: '409',
			unit: 'ppm'
		},
		{
			icon: icon16,
			title: '空气湿度',
			time: '11-10 20:00:00',
			data: '57.3',
			unit: '%RH'
		},
		{
			icon: icon19,
			title: '光照强度',
			time: '11-10 20:00:00',
			data: '886',
			unit: 'LUX'
		},
		{
			icon: icon17,
			title: '空气温度',
			time: '11-10 20:00:00',
			data: '20.6',
			unit: '℃'
		},
		{
			icon: icon24,
			title: '电池类型',
			time: '11-10 20:00:00',
			data: 'PMC_10B',
			unit: ''
		},
		{
			icon: icon25,
			title: '高温保护温度',
			time: '11-10 20:00:00',
			data: '70',
			unit: '℃'
		},
		{
			icon: icon25,
			title: '低温保护温度',
			time: '11-10 20:00:00',
			data: '-20',
			unit: '℃'
		},
	]);
	const [landServiceList,set_landServiceList] = useState([
		{
			title: '全托管',
			desc: '农场提供包种植包采摘包配送到家服务',
			price: '3.02'
		},
		{
			title: '半托管',
			desc: '农场提供包种植包采摘包配送到家服务',
			price: '2.02'
		},
		{
			title: '自种模式',
			desc: '农场提供包种植包采摘包配送到家服务',
			price: '0.00'
		}
	],);
	const [activeLandService,set_activeLandService] = useState();




	return (
		<div className="land-detail">
		<div className="swiper-wrap">
			<div className="swiper-btn-wrap flex">
				<div onClick={()=>set_swiperType(1)} className={`flex-center-center ${swiperType===1?'active':''}`}>图片</div>
				<div onClick={()=>set_swiperType(2)} className={`flex-center-center ${swiperType===2?'active':''}`}>监控</div>
			</div>
			<Swiper autoplay={5000}>
				{swiperList.map((item, index) => (
					<Swiper.Item key={index}>
						<div className="swiper-item">
						  <img src={item.img} />
						</div>
					  </Swiper.Item>
				))}
			</Swiper>
		</div>
		<div className="card-wrap">
			<div className="flex flex--center">
				<div>
					<span className="good-price">
						<span>￥</span>
						<span>0.02</span>
					</span>
					<span className="origin-price">原价:￥999.00</span>
				</div>
				<div className="flex-1"></div>
				<img className="share-icon" src={shareImg} />
				<img className="like-icon" src={likeImg} />
			</div>
			<div className="bold m-top10 m-bottom10">大鹏蔬菜基地A1-A10地块</div>
			<div className="f-size12 colorAb">这里是介绍文字这里是介绍文字，这里是介绍</div>
			<div className="detail-tab-wrap flex-between">
				{
					infoTabList.map((item, index) => (
						<div onClick={()=>set_activeInfoTab(index)} className={`detail-tab-item flex-center-center flex-col ${index===activeInfoTab?'active':''}`} key={index}>
							<div>{item.name}</div>
							<div className="f-size12 m-top10 online-status bold">在线</div>
						</div>
					))
				}
			</div>
			<div className="detail-tab-tab-wrap flex">
				{
					infoTabList[activeInfoTab].tabList.map((item, index) => (
						<div onClick={()=>set_infoTabList(infoTabList.map((itemy, indey) => indey === activeInfoTab ? {...itemy, activeTab: index} : itemy))} key={index} className={`flex-1 flex-center-center ${infoTabList[activeInfoTab].activeTab===index?'active':''}`}>{item.name}</div>
					))
				}
			</div>
			{
					activeInfoTab===0 &&
					 (
						<div className="flex flex-wrap flex-between">
							{deviceData.map((item, index) => (
								<div className="info-item-wrap flex-center-center flex-col" key={index}>
									<img src={item.icon} />
									<div className="f-size12">{item.title}</div>
									<div className="f-size10 colorAb" style={{margin: '2px 0'}}>{item.time}</div>
									<div className="f-size18 fw500" style={{color: '#4CBF5C'}}><span>{item.data}</span><span className="f-size10">{item.unit}</span></div>
								</div>
							))}
							<div className="info-item-wrap-fake"></div>
							<div className="info-item-wrap-fake"></div>
						</div>
					)
			}
			{
				activeInfoTab===1 &&
				(
					infoTabList[activeInfoTab].activeTab === 0 ? 
					(
						<div className="yuancheng-btn flex flex-center-center">
							<img src={jiaoshuiImg} />
							<div>远程浇水</div>
						</div>
					):
					(
						<div className="yuancheng-btn flex flex-center-center">
							<img src={jiaoshuiImg} />
							<div>远程投食</div>
						</div>
					)
				)
			}
			{
					activeInfoTab===2 &&
					 (
						<div className="flex flex-wrap flex-between">
							{soilFertilityTestingData.map((item, index) => (
								<div className="info-item-wrap flex-center-center flex-col" key={index}>
									<img src={item.icon} />
									<div className="f-size12">{item.title}</div>
									<div className="f-size10 colorAb" style={{margin: '2px 0'}}>{item.time}</div>
									<div className="f-size18 fw500" style={{color: '#4CBF5C'}}><span>{item.data}</span><span className="f-size10">{item.unit}</span></div>
								</div>
							))}
							<div className="info-item-wrap-fake"></div>
							<div className="info-item-wrap-fake"></div>
						</div>
					)
			}
			
			
			<div className="flex flex--center">
				<img src={locationImg} style={{width: '12px', marginRight: '5px'}} />
				<div className="m-right10">上海市 静安区</div>
				<Arrow color='#ABABAB' fontSize="12px" />
				<div className="flex-1"></div>
				<div className="f-size12 colorAb">18条出租记录</div>
			</div>
		</div>
		<div className="card-wrap">
			<div className="bold m-bottom10">选择地块</div>
			<div className="flex" style={{borderBottom: '1px solid #E3E3E3',paddingBottom: '16px'}}>
				<div className="flex-col flex-center-center" style={{marginRight: '30px'}}>
					<div className="bold">2323亩</div>
					<div className="colorAb m-top5">地块总面积</div>
				</div>
				<div className="flex-1">
					<div className="flex-between-center">
						<div className="colorAb">剩余/容量</div>
						<div>43/112</div>
					</div>
					<div className="progress-wrap">
						<div className="progress-content"></div>
					</div>
				</div>
			</div>
			<div className="flex flex--center m-top15" style={{marginBottom: '7px'}}>
				<div className="flex flex--center">
					<div className="white-block"></div>
					<div className="colorAb f-size10">可认领</div>
				</div>
				<div className="flex flex--center m-left20">
					<div className="green-block"></div>
					<div className="colorAb f-size10">已认领</div>
				</div>
				<div className="flex-1"></div>
				<div className="colorAb f-size10">已选择：4</div>
			</div>
			<div className="dikuai-item flex">
				<img src={swiperImg} className="dikuai-item-img" />
				<div className="flex-1">
					<div className="flex-between-center">
						<div className="f-size12 bold">地块编号：302号</div>
						<div className="jiankong-icon"></div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">面积</div>
							<div className="f-size10">30m²</div>
						</div>
						<div>
							<div className="colorAb f-size10">独立监控</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">球机预置位</div>
							<div className="f-size10">302号位</div>
						</div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">浇水控制器</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤PH</div>
							<div className="f-size10">6.5</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤含氮</div>
							<div className="f-size10">1000</div>
						</div>
					</div>
				</div>
			</div>
			<div className="dikuai-item flex dikuai-item-green">
				<img src={swiperImg} className="dikuai-item-img" />
				<div className="flex-1">
					<div className="flex-between-center">
						<div className="f-size12 bold">地块编号：302号</div>
						<div className="jiankong-icon"></div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">面积</div>
							<div className="f-size10">30m²</div>
						</div>
						<div>
							<div className="colorAb f-size10">独立监控</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">球机预置位</div>
							<div className="f-size10">302号位</div>
						</div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">浇水控制器</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤PH</div>
							<div className="f-size10">6.5</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤含氮</div>
							<div className="f-size10">1000</div>
						</div>
					</div>
				</div>
			</div>
			<div className="dikuai-item flex dikuai-item-select">
				<img src={swiperImg} className="dikuai-item-img" />
				<div className="flex-1">
					<div className="flex-between-center">
						<div className="f-size12 bold">地块编号：302号</div>
						<div className="jiankong-icon"></div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">面积</div>
							<div className="f-size10">30m²</div>
						</div>
						<div>
							<div className="colorAb f-size10">独立监控</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">球机预置位</div>
							<div className="f-size10">302号位</div>
						</div>
					</div>
					<div className="flex dikuai-item-row" style={{marginTop: '7px'}}>
						<div>
							<div className="colorAb f-size10">浇水控制器</div>
							<div className="f-size10">在线</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤PH</div>
							<div className="f-size10">6.5</div>
						</div>
						<div>
							<div className="colorAb f-size10">土壤含氮</div>
							<div className="f-size10">1000</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div className="card-wrap flex--center">
			<div className="bold flex-1">租赁周期</div>
			<div className="m-right5">一年时间(365天)</div>
			<Arrow color='#ABABAB' fontSize="12px" />
		</div>
		<div className="card-wrap">
			<div className="bold m-bottom10">地块服务</div>
			{
				landServiceList.map((item, index) => (
					<div onClick={()=>set_activeLandService(index)} key={index} className={`service-item flex--center ${index===activeLandService?'active':''}`}>
						<div className="flex-1">
							<div className="bold f-size12">{item.title}</div>
							<div className="colorAb f-size10 m-top10">{item.desc}</div>
						</div>
						<div>
							<span className="service-price">￥{item.price}</span>
							<span className="service-unit"> /天</span>
						</div>
					</div>
				))
				
			}
		</div>
		<div className="card-wrap">
			<div className="bold m-bottom10">实时数据</div>
			<div className="flex flex-wrap flex-between">
			{
				activeDataList.map((item, index) => (
					<div className="data-item flex" key={index}>
						<img src={item.icon}/>
						<div>
							<div className="f-size13">{item.title}</div>
							<div className="colorAb f-size10 m-top5 m-bottom10">{item.time}</div>
							<div style={{color: '#4CBF5C'}}>
								<span className="f-size18 fw500">{item.data}</span>
								<span className="f-size10">{item.unit}</span>
							</div>
						</div>
					</div>
				))
			}
			</div>
		</div>
		<div className="card-wrap">
			<div className="flex flex--center m-bottom10">
				<div className="bold flex-1">种子列表</div>
				<div className="colorAb f-size12 m-right5">全部列表</div>
				<Arrow color='#ABABAB' fontSize="12px" />
			</div>
			<div className="flex flex-wrap">
				{seedList.map((item, index) => (
					<div key={index} className="flex-1 flex-col flex-center-center seed-item">
						<div className="seed-img-wrap">
							<div className={`hot-wrap flex-center-center f-size10 ${item.hot>99?'hot-hot':(item.hot>90?'hot':'')}`}>
								<img src={hotImg} />
								<span>{item.hot > 99 ? '99+' : item.hot}</span>
							</div>
							<img src={item.img}/>
						</div>
						<div className="f-size12 bold seed-name">{item.title}</div>
						<div className="colorAb f-size10">{item.desc}</div>
					</div>
				))}
			</div>
		</div>
		<div className="card-wrap">
			<div className="bold m-bottom10">土地详情</div>
			<img className="m-bottom5 detail-img" src={swiperImg}/>
			<img className="m-bottom5 detail-img" src={swiperImg}/>
		</div>
		<div className="bottom-bar flex-between-center">
			<div className="flex-col flex-center-center">
				<img src={homeImg} />
				<div className="f-size10">首页</div>
			</div>
			<div className="flex-col flex-center-center">
				<img src={phoneImg} />
				<div className="f-size10">电话</div>
			</div>
			<div className="flex-col flex-center-center">
				<img src={yuanImg} />
				<div className="f-size10">溯源</div>
			</div>
			<div className="buy-btn bold f-size15 flex-center-center">我要租地</div>
		</div>
</div>
	);
  }